<template>
	<!-- 修改密码 -->
	<view class="app">
		<view class="form">
			<u-form :model="form" ref="uForm" label-align="left" :label-style="labelStyle" :error-type="errorType"
				label-width=180>
				<view class="form-section">
					<u-form-item prop="pwd" label="旧密码" required>
						<u-input v-model="form.pwd" type="password" confirmType="next" :custom-style="styles"
							placeholder="请输入旧密码" :placeholderStyle="placeholderStyle" trim
							:disabled="disabledInput" />
					</u-form-item>
					<u-form-item prop="pwd1" label="新密码" required>
						<u-input v-model="form.pwd1" type="password" confirmType="next" :custom-style="styles"
							placeholder="请输入新密码" :placeholderStyle="placeholderStyle" trim
							:disabled="disabledInput" />
					</u-form-item>
					<u-form-item prop="pwd2" label="确认密码" required>
						<u-input v-model="form.pwd2" type="password" confirmType="next" :custom-style="styles"
							placeholder="请输入新密码" :placeholderStyle="placeholderStyle" trim
							:disabled="disabledInput" />
					</u-form-item>
				</view>
			</u-form>
		</view>
		
		<view class="bottom-btn-bar">
			<u-button class="submit-btn" type="success" @click="submit" :disabled="disabled"
				:loading="loading">
				修改密码
			</u-button>
		</view>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import User from '@/domain/base/User.js'

	export default {
		data() {
			// 表单数据
			let form = {
				id: null,
				pwd: '', // 旧密码
				pwd1: '', // 新密码
				pwd2: '', // 确认密码
			};
			// 页面数据变量
			return {
				gapHeight: this.$css.gapHeight,
				gapColor: this.$css.gapColor,
				disabledInput: false,

				formCss: this.$css.form,
				tabbarCss: this.$css.tabbar,

				disabled: false,
				loading: false,

				// 表单数据
				form,
				rules: {
					"pwd": [{
						required: true,
						message: '请输入旧密码',
						trigger: ['change', 'blur'],
					}, {
						min: 6,
						message: '旧密码不能少于6个字符',
						trigger: ['change', 'blur']
					}, {
						validator: (rule, value, callback) => {
							return value == vk.getVuex('$user.userInfo.pwd');
						},
						message: '旧密码错误，请重新输入',
						trigger: 'blur',
					}],
					"pwd1": [{
						required: true,
						message: '请输入新密码',
						trigger: ['change', 'blur'],
					}, {
						min: 6,
						message: '密码不能少于6个字符',
						trigger: ['change', 'blur']
					}],
					"pwd2": [{
						required: true,
						message: '请输入确认密码',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return value == this.form.pwd1;
						},
						message: '确认密码与密码不一致',
						trigger: ['change', 'blur'],
					}],
				},

				// 表单相关样式
				placeholderStyle: this.$css.placeholderStyle,
				styles: this.$css.styles,
				styles2: this.$css.styles2,
				errorType: this.$css.errorType,
				labelStyle: this.$css.labelStyle,
			}
		},
		onLoad(options) {
			this.initPage(options);
		},
		onReady() {
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			initPage(options = {}) {
				
			},
			submit() {
				if(config.debug) console.log('页面表单', this.form)

				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.submitForm();
					}
				})
			},
			// 提交
			submitForm() {
				this.disabled = true;
				this.loading = true;
				
				this.form.username = vk.getVuex("$user.userInfo.username");
				
				let url = this.$api.ChangePwd;
				let data = User.newApiDataForPwd(this.form);
				
				if(config.debug) console.log('修改密码参数', url, data)
				
				this.$util.request(url, data)
				.then(res => {
					if(config.debug) console.log('修改密码信息res', res)
					if(res.code == 1){
						vk.toast('修改密码成功', 'success', () => {
							this.$tools.relogin();
						})
					} else {
						this.disabled = false;
						this.loading = false;
						vk.alert(res.message, '修改密码失败');
						return
					}
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	
</style>